<template>
    <div class="goodsinfo-container">
        <!-- 商品轮播图区域 -->
        <swiper-sub :swiperList="lunbotu"  :isfull="false"></swiper-sub>

        <!-- 商品展示区域 -->
        <div class="shop_infoarea">
            <div class="price_infoarea">
                <div class="price_left">
                    <span class="sell_price">￥{{ goodsinfo.sell_price }}</span>
                    <div class="market_price">
                        <span>￥{{ goodsinfo.market_price }}</span>
                        <i>秒杀价</i>
                    </div>
                </div>
                <div class="price_right">
                    <span>上架时间</span>
                    <span>{{ goodsinfo.add_time | dateFormat }}</span>
                </div>            
            </div>
            <div class="title">{{ goodsinfo.title }}</div>
            <div class="maininfo">
                <div class="sub_main">
                    <span>型号</span>
                    <i>{{ goodsinfo.goods_no }}</i>
                </div>
                <div class="sub_main">
                    <span>库存</span>
                    <i>{{ goodsinfo.stock_quantity }}件</i>
                </div>
                <div class="sub_main car_box">
                    <span>购买数量</span>
                    <i>
                        <number-box :maxnum="goodsinfo.stock_quantity" @getcount="getcarcount"></number-box>
                        <transition
                         @before-enter="beforeEnter"
                         @enter="enter"
                         @after-enter="afterEnter">
                            <div class="carball" v-show="bacllflag" ref="carball"></div>
                        </transition>
                    </i>
                </div>
                <div class="sub_main submain_btm">
                    <mt-button type="primary" size="small">立即购买</mt-button>
                    <mt-button type="danger" size="small" @click="addcart">加入购物车</mt-button>
                </div>
            </div>
            <div class="shop_detail">
                <span>详情</span>
            </div>
            <div class="detail_content" v-html="detailinfo.content"></div>
            <div class="shop_detail">
                <span>评论</span>
            </div>
            <comment-sub :id="goodsid"></comment-sub>
        </div>
        
        
    </div>
</template>

<script>
import { Toast } from "mint-ui"
import swiper from "../subcomponents/swiper.vue"
import numberbox from "../subcomponents/numberbox.vue"
import comment from "../subcomponents/comment.vue"

export default {
    data(){
        return {
            goodsid:this.$route.params.goodsid,       // 根据路由导航过来，获取传递的 商品id
            goodsinfo:{},      // 商品详情数据对象
            lunbotu:[],         // 商品轮播图数据
            detailinfo:{},       // 商品的图文介绍数据对象
            bacllflag:false,      // 小球标识
            carcount:1            // 购买数量，默认为1
        }
    },
    created(){
        this.getgoodsinfo();     // 调用商品详情数据方法
        this.getlunbotu();       // 调用商品轮播图方法
        this.getdetailinfo();    // 调用商品的图文介绍数据方法
    },
    methods:{
        getgoodsinfo(){    // 获取商品详情的数据
            this.$http.get("api/goods/getinfo/" + this.goodsid).then(result => {
                if(result.data.status === 0){
                    this.goodsinfo = result.data.message[0];
                }else{
                    Toast("获取失败");
                }
            })
        },
        getlunbotu(){
            this.$http.get("api/getthumimages/" + this.goodsid).then(result => {
                if(result.data.status === 0){            
                    // 由于 轮播图子组件 的 图片路径为 item.img，我们这里的数据数组为 src，所以需要遍历给数组的每一项添加一个 img 属性
                    result.data.message.forEach(item => {
                        item.img = item.src;
                    });
                    this.lunbotu = result.data.message;
                }else{
                    Toast("获取轮播图失败");
                }
            })
        },
        getdetailinfo(){   // 获取商品介绍的 图文详情 数据
            this.$http.get("api/goods/getdesc/" + this.goodsid).then(result => {
                if(result.data.status === 0){
                    this.detailinfo = result.data.message[0];
                }else{
                    Toast("获取失败");
                }
            });
        },
        addcart(){        // 添加到购物车方法
            // 添加到购物车小球显示
            this.bacllflag = !this.bacllflag;
            // 构建一个 商品对象，通过 store 保存到 cart
            var goodsinfo = {
                id:this.goodsid,
                count:this.carcount,
                price:this.goodsinfo.sell_price,
                selected:true
            }
            // 调用 store 的 addTocart 方法，传递商品对象参数过去
            this.$store.commit("addTocart",goodsinfo);
        },
        getcarcount(carcount){   // 子组件 $emit 调用的获取购买数量的方法
            console.log("当前子组件传递回的购买数量为：" + carcount);
            // 把值保存到 data 的 carcount，方便 加入购物车时获取
            this.carcount = carcount;
        },

        // 小球半场动画
        beforeEnter(el){
            el.style.transform = "translate(0,0)";
        },
        enter(el,done){
            el.offsetWidth;
            // 如何将 小球 跳入 购物车 的距离可以兼容所有不同分辨率的手机？？？
            // 解决方法：获取 底部购物车徽标 的纵横坐标 - 小球 的纵横坐标，得到的就是需要移动的距离
            // 利用 js 的原生方法 getBoundingClientRect()，返回一个矩形对象，包括left、top、right、bottom。表示元素各边到页面上边和左边的距离

            // 获取 小球 在 页面上的位置---利用 ref 获取当前组件的元素
            const ballPosition = this.$refs.carball.getBoundingClientRect();
            // 获取 徽标 在 页面上的位置---由于不同组件，所以不能使用ref属性获取元素，虽然vue不推荐进行dom操作，但我们这里只是简单使用一下dom操作
            const badgePosition = document.getElementById("badge").getBoundingClientRect();
            // 计算两者的纵横坐标差
            const xDist = badgePosition.left - ballPosition.left;
            const yDist = badgePosition.top - ballPosition.top;

            // el.style.transform = 'translate('+xDist+'px,'+yDist+'px)';
            el.style.transform = `translate(${xDist}px,${yDist}px)`;    // es6
            el.style.transition = "all 0.7s cubic-bezier(0.68,-0.2,0.27,0.55)";
            done();
        },
        afterEnter(el){
            this.bacllflag = !this.bacllflag;
        }
    },
    components:{
        "swiper-sub":swiper,
        "number-box":numberbox,
        "comment-sub":comment
    }
}
</script>

<style lang="scss">
.goodsinfo-container{
    .shop_infoarea{
        background:#f2f2f2;
        .price_infoarea{
            display: flex;
            font-size:12px;
            height:50px;
            align-items:center;
            background:#8e345f;
            .price_left{
                flex:2;
                padding:5px 10px;
                display: flex;
                align-items: center;
                .sell_price{
                    margin-right:10px;
                    color:#fff;
                    font-weight:bold;
                    font-size:20px;
                }
                .market_price{
                    display:flex;
                    flex-direction: column;
                    span{
                        text-decoration: line-through;
                        color:#ccc;
                        line-height:0;
                        margin:10px 0;
                    }
                    i{
                        color:#fff;
                        font-style:normal;
                    }
                }
            }
            .price_right{
                flex:1;
                background:#f2f2f2;
                padding:5px 10px;
                height:100%;
                display: flex;
                flex-direction: column;
                text-align:center;
                color:#333;
            }
        }

        .title{
            padding:10px;
            margin-bottom:10px;
            font-weight:bold;
            font-size:16px;
            letter-spacing:1px;
            text-align: justify;
            background: #ffffff;
            color: #000;
        }

        .maininfo{
            background:#ffffff;
            border-radius:12px;
            .sub_main{
                height:48px;
                font-size:13px;
                display: flex;
                align-items: center;
                position: relative;
                padding:0 10px;
                &:after{
                    content:"";
                    position:absolute;
                    bottom:0;
                    left:23%;
                    right:0;
                    width:100%;
                    height:1px;                 
                    background:#f2f2f2;
                }  
                span{
                    font-weight:bold;
                    width:20%;
                    margin-right:3%;
                }
                i{
                    font-style: normal;
                    width:77%;              
                }                
            }
            .car_box{
                i{
                    position:relative;
                    .carball{
                        width:16px;
                        height:16px;
                        border-radius:50%;
                        background:red;
                        position:absolute;
                        top:9.5px;
                        left:52px;
                        z-index:99;
                    }
                }
            }
            .submain_btm{
                display: block;
                text-align:right;
                &:after{
                    content:"";
                    position:absolute;
                    bottom:0;
                    left:0;
                    right:0;
                    height:0;
                }
                button{
                    margin-top:7.5px;
                }
            }
        }

        .shop_detail{
            text-align:center;
            font-size:14px;
            height:45px;
            line-height:45px;
            background:#f6f6f6;
            margin-top:10px;
            span{
                position: relative;
                display:block;
                letter-spacing: 1px;
                &:before{
                    content:"";
                    width:40px;
                    height:1px;
                    background:#c9c9c9;
                    position:absolute;
                    top:50%;
                    left:32%;
                }
                &:after{
                    content:"";
                    width:40px;
                    height:1px;
                    background:#c9c9c9;
                    position:absolute;
                    top:50%;
                    right:32%;
                }
            }
        }

        .detail_content{
            background:#ffffff;
            padding:10px;
            font-size:12px;
            text-align:justify;
            img{
                width:100%;
            }
        }
    }
}
</style>